<script lang="ts" setup>
import {ref} from 'vue'
import {RouterLink} from 'vue-router'
import {Avatar} from '@element-plus/icons-vue'
</script>

<template>
<!-- 底部上部分 -->
 <div class="footer">
    <el-row :gutter="20" class="top">
        <el-col :span="6" class="service">
            <el-row :gutter="10">
                <el-col :span="10" class="icons"><el-icon :size="66"><Avatar /></el-icon></el-col>
                <el-col :span="14" class="service-text">
                <h2>人工客服</h2>
                <h4>400-562-978</h4>
                <p>在线咨询</p>
                </el-col>
            </el-row>
        </el-col>
        <el-col :span="3">
            <el-row :gutter="10" >
                <el-col :span="24">
                    <h3>帮助中心</h3>
                    <p>账号管理</p>
                    <p>购物指南</p>
                    <p>订单操作</p>
                </el-col>
            </el-row>
        </el-col>
        <el-col :span="3">
            <el-row :gutter="10" >
                <el-col :span="24">
                    <h3>关注我们</h3>
                    <p>新浪微博</p>
                    <p>官方微信</p>
                    <p>联系我们</p>
                </el-col>
            </el-row>
        </el-col>
        <el-col :span="3">
            <el-row :gutter="10" >
                <el-col :span="24">
                    <h3>线下门店</h3>
                    <p>NEWBEE TOWN</p>
                    <p>服务网点</p>
                    <p>授权体验店</p>
                </el-col>
            </el-row>
        </el-col>
        <el-col :span="3">
            <el-row :gutter="10" >
                <el-col :span="24">
                    <h3>关于我们</h3>
                    <p>了解新蜂</p>
                    <p>加入新蜂</p>
                    <p>捐赠维护</p>
                </el-col>
            </el-row>
        </el-col>
        <el-col :span="6">
            <el-row :gutter="10" >
                <el-col :span="24" >
                    <h3>newbee-mall</h3>
                    <img src="http://mall.newbee.ltd/mall/image/pay/wxpay_qrcode.png" style="width:110px" alt="二维码"> 
                    <p>分公司：</p>
                    <p>夏威夷 挪威 冰岛 巴西</p>
                </el-col>
            </el-row>
            
        </el-col>
    </el-row>
    <!-- 底部下部分  -->
     <el-row :gutter="20" class="bot">
        <el-row :gutter="20">
            <el-col :span="24" class="link-a">
                <p>友情链接：</p>
                <a href="#">新蜂商城</a>
                <a href="#">后台管理系统</a>
                <a href="#">课程视频</a>
                <a href="#">课程文档</a>
                <a href="#">捐赠</a>
                <a href="#">问题反馈</a>
                <a href="#">gitee地址</a>
            </el-col>
        </el-row>
    </el-row>
    <el-row :gutter="20" class="end">
        <el-col :span="24">
            <p class="qqtalk">
                <span>新蜂商城</span>| <span>Powered by 十三</span> | QQ交流群：9945658 <img src="//pub.idqqimg.com/wpa/images/group.png" alt="qq交流群">
            </p>
            <p>Copyright © 2019-2020 十三  All Rights Reserved.  |   浙ICP备17008806号 </p>
        </el-col>
        <el-col :span="24">222</el-col>
    </el-row>
 </div>
</template>

<style lang="scss" scoped>
.footer{
    padding: 30px 200px;
    height: 530px;
    background-color: black;
    color: white;
    box-sizing: border-box;
    
    .top{
        height: 300px;
        text-align: left;
        border-bottom: 1px solid white;
        .el-row{
            .el-col{
                p{
                    font-size: 14px;
                }
            }
        }
        .service{
            text-align: left;
            display: flex;
            .icons{
                margin-top: 16px;
            }
            .el-row{
                width: 100%;
            }
            .service-text{
                // margin-top: -14px ;
                p{
                    border: 1px solid white;
                    text-align: center;
                    line-height: 32px;
                    width: 92px;
                    height: 32px;
                }
            }
        }
    }
    .bot{
        padding: 20px 0 10px 0;
        border-bottom: 1px solid white;
        .link-a{
            a{
            font-size: 14px;
            color: white !important;
            text-decoration: none;
            padding: 0 30px;
        }
        }
    }
    .end{
        text-align: center;
        p{
            font-size: 14px;
        }
        .qqtalk{
            height: 30px;
            line-height: 30px;
            img{
                vertical-align: middle;
            }
        }
    }
}

</style>